<template>
  <div id="pannelOne" style="width:1000px; height:300px;padding:0">
    <div data-uid="cat0" class="cat0" data-fac="0">
      <div class="center-title" style="width:105px;margin-left:70px">
        <span>计价类型(必选)<img src="../../../../../assets/M8/prod/info/not-allowblank.png" alt=""></span>
      </div>
      <div class="centerdiv" style="margin-left:0">
        <div data-uid="cat0_1" data-code="15" class="dbx6 canSelect"><span>非净值型</span></div>
        <div data-uid="cat0_2" data-code="16" class="dbx5 canSelect"><span>净值型</span></div>
        <div data-uid="cat0_3" data-code="20" class="dbx9 canSelect"><span>货币型</span></div>
      </div>
    </div>
    <div data-uid="cat1" class="cat1" data-fac="1">
      <div class="center-title" style="margin-left:110px;">
        <span>销售形态<img src="../../../../../assets/M8/prod/info/not-allowblank.png" alt=""></span>
      </div>
      <div class="centerdiv" style="margin-left:50px">
        <div data-uid="cat1_1" data-code="04" class="dbx1 canSelect"><span>滚动式</span></div>
        <div data-uid="cat1_2" data-code="01" class="dbx2 canSelect"><span>封闭式</span></div>
        <div data-uid="cat1_3" data-code="03" class="dbx3 canSelect"><span>开放式tn</span></div>
        <div data-uid="cat1_4" data-code="02" class="dbx4 canSelect"><span>开放式t0</span></div>
        <div data-uid="cat1_5" data-code="00" class="dbx5 canSelect"><span>固定期限</span></div>
        <div data-uid="cat1_6" data-code="12" class="dbx6 canSelect"><span>结构化</span></div>
      </div>
    </div>
    <div data-uid="cat3" class="cat3" data-fac="3">
      <div class="center-title">
        <span>业务组件(多选)</span>
      </div>
      <div class="centerdiv" style="margin-top:102px">
        <div style="width: 100%; position: absolute;margin-left:-89px;">
          <div data-uid="cat3_PIC" data-code="09" class="dbx7 canSelect"><span>中债登数据元</span></div>
          <div data-uid="cat3_PIM" data-code="11" class="dbx8 canSelect"><span>产品报备数据</span></div>
          <div data-uid="cat3_PIPI" data-code="05" class="dbx9 canSelect"><span>付息管理</span></div>
        </div>
        <div style="width: 100%; position: absolute;margin-left:22px;">
          <div data-uid="cat3_PIF" data-code="06" class="dbx7 canSelect"><span>费用管理</span></div>
          <div data-uid="cat3_PIOD" data-code="13" class="dbx8 canSelect"><span>开放日管理</span></div>
          <div data-uid="cat3_PIP" data-code="14" class="dbx9 canSelect"><span>业绩报酬</span></div>
        </div>
        <div style="width: 100%;  height: 122px;margin-left :132.5px; position: absolute; ">
          <div data-uid="cat3_PIVP" data-model="13" class="dbx7 canSelect"><span>估值计划</span></div>
          <div data-uid="cat3_PIPL" data-model="12" class="dbx8 canSelect"><span>披露计划</span></div>
          <div data-uid="cat3_10" data-model="600" class="dbx10"><span>. . .</span></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      editMod: {
        type: String,
        default: 'ADD'
      }
    },
    data() {
      return {}
    },
    // 生命周期开始
    mounted() {
      // 设置监听器
      for (const elementsByClassNameElement of document.getElementsByClassName('canSelect')) {
        elementsByClassNameElement.addEventListener('click', e => {
          if (this.editMod === 'MODI' || this.editMod === 'COPY') {
            alert('复制、修改产品时不可变更产品模式！')
            return
          }
          // if (this.hasClass('disable')) {
          //   return
          // }
          // if (this.disabledItem(this)) {
          //   return
          // }
          // this.selectedItem(this)
          // if (this.hasClass('selected')) {
          //   this.removeClass('selected')
          // } else {
          //   this.addClass('selected')
          // }
          // alert($('#PRODINFO_CREATE .cat3 .canSelect:not(.selected):not(.disable)').length)
          // 如果计价类型和销售形态都选中，则业务组件直接完成
          //
          // if ($('#PRODINFO_' + this.editMod + ' .cat0').find('div.selected').length > 0 && $('#PRODINFO_' +
          //   this.editMod + ' .cat1').find('div.selected').length > 0) {
          //   $('#PRODINFO_' + this.editMod + ' .cat3 .canSelect:not(.selected):not(.disable)').each(function() {
          //     this.change()
          //   })
          // } else {
          // $('#PRODINFO_' + this.editMod + ' .cat3 .canSelect.selected').each(function() {
          //   this.change()
          // })
          // }

          this.hideShowPanel()
        })
      }
    },
    // 生命周期结束
    methods: {
      hideShowPanel() {
        // 隐藏所有disable组件的页面
        // $(".canSelect.disable").each(function () {
        //   var name = $(this).attr('data-uid');
        //   var id = name.substring(name.indexOf('_') + 1, name.length);
        //   $("#" + id + "_" + editMod).css("display", "none");//隐藏页面
        //   $("#" + id + "_" + editMod).addClass("k-donot-init");//对应的页签屏蔽初始化
        // });
        // 显示所有selecte组件的页面
        // $(".canSelect.selected").each(function () {
        //   var name = $(this).attr('data-uid');
        //   var id = name.substring(name.indexOf('_') + 1, name.length);
        //   $("#" + id + "_" + editMod).css("display", "");//隐藏页面
        //   $("#" + id + "_" + editMod).removeClass("k-donot-init");//对应的页签屏蔽初始化
        //   K.form.reset($("#" + id + "_" + editMod + " form"));
        //
        // })
        // $(".canSelect:not(.selected):not(.disable)").each(function () {
        //   var name = $(this).attr('data-uid');
        //   var id = name.substring(name.indexOf('_') + 1, name.length);
        //   $("#" + id + "_" + editMod).css("display", "none");//隐藏页面
        //   $("#" + id + "_" + editMod).addClass("k-donot-init");//对应的页签屏蔽初始化
        //   K.form.reset($("#" + id + "_" + editMod + " form"));
        //
        // });
        // $("#PRODINFO_" + editMod + " .saveProdInfo").remove();//去除保存按钮
        // $("#PRODINFO_" + editMod + " .panel[data-title]:not(.k-donot-init) .panel-footer button[data-step-type='next']").css("display", "");//显示所有页签的继续按钮
        // $("#PRODINFO_" + editMod).data('inited', false);//修改页签初始化状态
        // $("#PRODINFO_" + editMod + " .k-step-title").remove();//删除旧的菜单栏
        // $("#PRODINFO_" + editMod + " .panel-footer button[data-step-type]").unbind('click');//接触绑定的click的函数
        // K.init.step("body");//重新初始化页签
        // $("#PRODINFO_" + editMod + " .panel[data-title]:not(.k-donot-init) .panel-footer:last").prepend($saveBtn);//显示最后一个页签的保存按钮
        // K.init.btn("#PRODINFO_" + editMod + " .saveProdInfo");
        // $("#PRODINFO_" + editMod + " .panel[data-title]:not(.k-donot-init) .panel-footer button[data-step-type='next']:last").css("display", "none");//隐藏最后一个页签的继续按钮
        // fieldChange();
      },
      /**
       * Description:高亮选中按钮
       * Create by huanghuaxin
       * Date:2019/4/2
       */
      selectedItem(item) {
        // var uid = $(item).attr('data-uid')
        // eslint-disable-next-line no-eval
        // var selecteds = eval('items.' + uid + '.selected_item_ids')
        // if (!selecteds || selecteds === '') {
        //   return
        // }
        // var ss = selecteds.split(',')
        // ss.forEach(function(s) {
        //   var $s = $('#PRODINFO_' + this.editMod + ' [data-uid=' + s + ']')
        //   var $srn = $s.data('sRefNum')// 置灰引用数
        //   if ($(item).hasClass('selected')) { // 取消选中
        //     $s.data('sRefNum', $srn - 1)
        //     if ($srn === 1) {
        //       $s.removeClass('selected')
        //     }
        //   } else {
        //     if (!$srn || $srn === 0) {
        //       $s.data('sRefNum', 1)
        //       $s.addClass('selected')
        //     } else {
        //       $s.data('sRefNum', $srn + 1)
        //     }
        //   }
        // })
      },
      /**
       * Description:置灰互斥按钮
       * Create by huanghuaxin
       * Date:2019/4/2
       */
      disabledItem(item) {
        // var uid = item.attr('data-uid')
        // eslint-disable-next-line no-eval
        // var disables = eval('items.' + uid + '.disabled_item_ids')
        // if (!disables || disables === '') {
        //   return
        // }
        // var ss = disables.split(',')
        // ss.forEach(function(s) {
        //   var $s = $('#PRODINFO_' + editMod + ' [data-uid=' + s + ']')
        //   var $drn = $s.data('dRefNum')
        //   if (item.hasClass('selected')) {
        //     $s.data('dRefNum', $drn - 1)
        //     if ($drn === 1) {
        //       $s.removeClass('disable')
        //     }
        //   } else {
        //     if (!$drn || $drn === 0) {
        //       $s.data('dRefNum', 1)
        //       $s.addClass('disable')
        //     } else {
        //       $s.data('dRefNum', $drn + 1)
        //     }
        //   }
        // })
      }
    }
  }
</script>

<style scoped>

  .center-title {
    position: absolute;
    font-weight: bold;
    font-size: 12px;
    margin-left: 130px;
    margin-top: 30px;
  }

  .centerdiv {
    background-color: #C7EDC9;
    position: absolute;
    margin-left: 22%;
    margin-top: 70px;
  }

  .centerdiv2 {
    background-color: #C7EDC9;
    position: absolute;
    margin-left: 10%;
    margin-top: 74px;
  }

  .cat0 {
    position: absolute;
    left: 0;
    height: 300px;
    width: 150px;
  }

  .cat1 {
    position: absolute;
    left: 210px;
    height: 300px;
    width: 250px;
  }

  .cat2 {
    position: absolute;
    left: 460px;
    height: 300px;
    width: 200px;
  }

  .cat3 {
    position: absolute;
    left: 610px;
    height: 300px;
    width: 340px;
  }

  .dbx1 {
    position: absolute;
    background-image: url("../../../../../assets/M8/prod/info/white.png");
    margin-left: 55px;
    margin-top: 0;
    width: 69px;
    height: 59px;
    text-align: center;
    font-size: 10px;
    line-height: 59px;
  }

  .dbx2 {
    background-image: url("../../../../../assets/M8/prod/info/white.png");
    position: absolute;
    margin-left: 0;
    margin-top: 31px;
    width: 69px;
    height: 59px;
    text-align: center;
    font-size: 10px;
    line-height: 59px;
  }

  .dbx3 {
    background-image: url("../../../../../assets/M8/prod/info/white.png");
    position: absolute;
    margin-left: 0;
    margin-top: 93px;
    width: 69px;
    height: 59px;
    text-align: center;
    font-size: 10px;
    line-height: 59px;
  }

  .dbx4 {
    background-image: url("../../../../../assets/M8/prod/info/white.png");
    position: absolute;
    margin-left: 54.5px;
    margin-top: 124px;
    width: 69px;
    height: 59px;
    text-align: center;
    font-size: 10px;
    line-height: 59px;
  }

  .dbx5 {
    background-image: url("../../../../../assets/M8/prod/info/white.png");
    position: absolute;
    margin-left: 109px;
    margin-top: 93px;
    width: 69px;
    height: 59px;
    text-align: center;
    font-size: 10px;
    line-height: 59px;
  }

  .dbx6 {
    background-image: url("../../../../../assets/M8/prod/info/white.png");
    position: absolute;
    margin-left: 109px;
    margin-top: 31px;
    width: 69px;
    height: 59px;
    text-align: center;
    font-size: 10px;
    line-height: 59px;
  }

  .dbx7 {
    position: absolute;
    background-image: url("../../../../../assets/M8/prod/info/white.png");
    margin-left: 56px;
    margin-top: 0;
    width: 69px;
    height: 59px;
    text-align: center;
    font-size: 10px;
    line-height: 59px;
  }

  .dbx8 {
    background-image: url("../../../../../assets/M8/prod/info/white.png");
    position: absolute;
    margin-left: 0;
    margin-top: 31px;
    width: 69px;
    height: 59px;
    text-align: center;
    font-size: 10px;
    line-height: 59px;
  }

  .dbx9 {
    background-image: url("../../../../../assets/M8/prod/info/white.png");
    position: absolute;
    margin-left: 56px;
    margin-top: 62px;
    width: 69px;
    height: 59px;
    text-align: center;
    font-size: 10px;
    line-height: 59px;
  }

  .dbx10 {
    background-image: url("../../../../../assets/M8/prod/info/white.png");
    position: absolute;
    margin-left: 111px;
    margin-top: 31px;
    width: 69px;
    height: 59px;
    text-align: center;
    font-size: 10px;
    line-height: 59px;
  }

  .canSelect {
    background-image: url('../../../../../assets/M8/prod/info/canSelect.png');
    cursor: pointer;
  }

  .required {
    background-image: url("../../../../../assets/M8/prod/info/should.png");
  }

  .selected {
    background-image: url("../../../../../assets/M8/prod/info/selected.png");
  }

  .disable {
    background-image: url("../../../../../assets/M8/prod/info/unable.png");
  }

  .selected_text {
    color: #fff;
  }

  /* 防止文字高亮, 体验不好 */
  div.center-title,
  div[data-code],
  div[data-model] {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
  }

</style>
